<template>
  <div>
    <a-modal
      :visible="visible"
      title="POI列表"
      centered
      :width="1200"
      @cancel="onClose"
      @ok="saveFn"
      :body-style="{
        maxHeight: '500px',
        overflowY: 'auto',
        // padding: '10px 24px',  
      }"
    >
      <div class="container">
        <a-row>
          <a-col :span="24">
            <a-button
              @click="addHandle"
              type="primary"
              style="
                background: #2878ff;
                border: none;
                border-radius: 6px;
                margin-right: 10px;
              "
              ><plus-outlined />新增</a-button
            ></a-col
          >
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col :span="24">
              <div class="dw">


            <a-table
            overlayClassName="dw"
              :row-key="(record) => record.id"
              :dataSource="dataSource"
              :columns="columns"
              :pagination="pagination"
              :loading="queryData.loading"
              @change="handTabChange"
              :row-selection="{
                type: 'checkbox', // 设置为单选模式
               hideDefaultSelections: true, // 去除全选/反选框
                selectedRowKeys: newselectedRowKeys,
                onChange: onSelectChange,
              }"
            >
              <!-- :scroll="{ x: 1200 }" -->
              <template #bodyCell="{ column, record }">
                <!-- POI_ID -->
                <template v-if="column.key === 'poi_id'">
                  <a-popover>
                    <template #content>
                      <div
                        style="max-width: 100px; word-wrap: break-word"
                        v-if="record.poi_id?.trim().length > 15"
                      >
                        {{ record.poi_id }}
                      </div>
                    </template>
                    <div>
                      {{
                        record.poi_id?.trim().length > 15
                          ? record.poi_id.slice(0, 15) + "..."
                          : record.poi_id
                      }}
                    </div>
                  </a-popover>
                </template>
                <!-- 门店名称 -->
                <template v-if="column.key === 'store_name'">
                  <a-popover>
                    <template #content>
                      <div
                        style="max-width: 100px; word-wrap: break-word"
                        v-if="record.store_name?.trim().length > 15"
                      >
                        {{ record.store_name }}
                      </div>
                    </template>
                    <div>
                      {{
                        record.store_name?.trim().length > 15
                          ? record.store_name.slice(0, 15) + "..."
                          : record.store_name
                      }}
                    </div>
                  </a-popover>
                </template>
                <!-- 门店地址 -->
                <template v-if="column.key === 'store_address'">
                  <a-popover>
                    <template #content>
                      <div
                        style="max-width: 100px; word-wrap: break-word"
                        v-if="record.store_address?.trim().length > 15"
                      >
                        {{ record.store_address }}
                      </div>
                    </template>
                    <div>
                      {{
                        record.store_address?.trim().length > 15
                          ? record.store_address.slice(0, 15) + "..."
                          : record.store_address
                      }}
                    </div>
                  </a-popover>
                </template>
                <template v-if="column.key === 'poi_bind_library_count'">
                  <a-button
                    type="link"
                    @click="viewHandle(record)"
                    :disabled="record.poi_bind_library_count == 0"
                    >查看({{ record.poi_bind_library_count }})</a-button
                  >
                </template>
                <template v-if="column.key === 'action'">
                  <div class="action">
                    <a @click="editHandle(record)">编辑 </a>
                    <a @click="deletHandle(record)">删除</a>
                  </div>
                </template>
              </template>
            </a-table>
              </div>
            
            </a-col
          >
        </a-row>
      </div>

      <!-- 添加组件 -->
      <PoiListAddPol
        ref="poiListAddPol"
        @onSubmit="successPOI"
        :id="queryData.poiId"
      />
      <!-- 查看组件 -->
      <viewPoiDetail ref="poiDetail" />
    </a-modal>
  </div>
</template>

<script setup>
import PoiListAddPol from "@/views/shotstack/MaterialCenter/modules/PoiListAddPol.vue";
import viewPoiDetail from "@/views/shotstack/MaterialCenter/viewPoiDetail.vue";
import { reactive, toRefs, computed, onMounted, ref, createVNode, watch } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

import request from "@/common/utils/request";
import { message, Modal } from "ant-design-vue";
const emit = defineEmits(["importSuccess"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: true,
  },
  platform_account_user_id: {
    type: String,
    default: ""
  },
  checked_poi: {
 type: String,
    default: ""
  }
});

const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "POI_ID",
    dataIndex: "poi_id",
    key: "poi_id",
    align: "center",
  },
  {
    title: "门店名称",
    dataIndex: "store_name",
    key: "store_name",
    align: "center",
  },
  {
    title: "门店地址",
    key: "store_address",
    dataIndex: "store_address",
    align: "center",
  },
  // {
  //   title: "获取方式",
  //   key: "poi_type_text",
  //   dataIndex: "poi_type_text",
  //   align: "center",
  // },
  // {
  //   title: "绑定项目",
  //   key: "poi_bind_library_count",
  //   dataIndex: "poi_bind_library_count",
  //   align: "center",
  // },
  {
    title: "操作",
    key: "action",
    align: "center",
    fixed: "right",
  },
];
const dataSource = ref([]);
let queryData = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  poiId: 0,
  detailId: null,
});
onMounted(() => {

});

const newselectedRowKeys = ref([]);
// 分页
const pagination = computed(() => ({
  total: queryData.value.total,
  current: queryData.value.page,
  pageSize: queryData.value.pageSize,
  showSizeChanger: false,
  size: "small",
  showTotal: (total) => `共${total}条`,
}));

const poiListAddPol = ref(null);

// 获取Pol列表
const getPolList = () => {
  let params = {
    page: queryData.value.page,
    pageSize: queryData.value.pageSize,
  };
  queryData.value.loading = true;
  request
    .get("/work_ai", "/user/shotstack/associ_poi/list", params)
    .then((res) => {
      dataSource.value = res.result.data;
      console.log(dataSource.value, "数组数据6666666");
      queryData.value.total = res.result.total;
    })
    .finally(() => {
      queryData.value.loading = false;
    });
};

// 分页切换
const handTabChange = (pager) => {
  queryData.value.page = pager.current;
  queryData.value.pageSize = pager.pageSize;
  getPolList();
};

// 添加
const addHandle = () => {
  poiListAddPol.value.showModal();
};
// 编辑
const editHandle = (record) => {
  poiListAddPol.value.showModal(record);
};
// 删除
const deletHandle = (record) => {
  Modal.confirm({
    title: "确定删除吗?",
    icon: createVNode(ExclamationCircleOutlined),
    // content: "Some descriptions",
    okText: "确定",
    cancelText: "取消",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/poi/delete", { id: record.id })
        .then((res) => {
          if (res) {
            message.success("删除成功");
            getPolList();
          }
        })
        .finally(() => {
          // queryData.value.loading = false;
        });
    },
    onCancel() {
      console.log("Cancel");
    },
  });
  console.log(record);
};
// 添加成功回调
const successPOI = (data) => {
  getPolList();
};
// 查看
const poiDetail = ref(null);
const viewHandle = (record) => {
  if (record.poi_bind_library_count <= 0) {
    return message.warning("该POI未绑定项目");
  } else {
    poiDetail.value.showModal(record);
  }
};

const onSelectChange = (selectedRowKeys, selectedRows) => {
newselectedRowKeys.value = []

   newselectedRowKeys.value.push(selectedRowKeys[selectedRowKeys.length - 1])
};

const onClose = () => {
  newselectedRowKeys.value = []
  queryData.value.page  = 1
  queryData.value.pageSize  = 10
  emit("onClose");
};

const saveFn = () => {
  const poi_id = newselectedRowKeys.value?.[0] || 0
  request
    .put("/work_ai", "/user/platformAccount/user/update", {
      id: props.platform_account_user_id,
      merchant_associ_poi_id: poi_id,
    })
    .then((res) => {
      message.success("更新成功")
       onClose()
    });

  //
};

watch(
  () => props.visible,
  (val) => {
    if (val) {
      getPolList();
    }
  }
);

watch(
  () => props.checked_poi,
  (val) => {
    if (val) {
      newselectedRowKeys.value.push(props.checked_poi)
    }
  }
);



</script>




<style lang="scss">

.dw {
.ss-table-selection {
   display: none !important;

}
}



</style>

<style lang="scss" scoped>
.container {
  .action {
    display: flex;
    justify-content: center;

    a {
      color: var(--ss-primary-color);

      &:nth-child(1) {
        margin-right: 8px;
      }

      &:nth-child(1) {
        margin-left: 8px;
      }
    }
  }
}
</style>
